<script lang="ts" setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { onMounted, ref } from 'vue';
import './style.less';

const containerRef = ref();
const chartRef = ref();

const { showPhoenix } = defineProps({ showPhoenix: Boolean });

onMounted(() => {
  // Echarts
  const chartDom = chartRef.value;
  const myChart = echarts.init(chartDom);
  const option = {
    backgroundColor: '#000',
    globe: {
      baseTexture: '/assets/world.topo.bathy.200401.jpg',
      heightTexture: '/assets/world.topo.bathy.200401.jpg',
      displacementScale: 0.04,
      shading: 'realistic',
      environment: '/assets/starfield.jpg',
      realisticMaterial: {
        roughness: 0.9
      },
      postEffect: {
        enable: true
      },
      light: {
        main: {
          intensity: 5,
          shadow: true
        },
        ambientCubemap: {
          texture: '/assets/pisa.hdr',
          diffuseIntensity: 0.2
        }
      }
    }
  };

  option && myChart.setOption(option);
})
</script>

<template>
  <el-card class="echarts_three_style">
    <div class="container" ref="containerRef">
      <div :class="`sketchfab-embed-wrapper ${showPhoenix ? 'show' : 'hide'}`">
        <iframe title="phoenix bird" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/844ba0cf144a413ea92c779f18912042/embed?autostart=1&camera=0&preload=1&dnt=1"></iframe>
      </div>
      <div class="echarts-container" ref="chartRef"></div>
    </div>
  </el-card>
</template>

<style lang='less' src='./style.less' scoped />